
let path = require('path')

let HtmlWebpackPlugin = require('html-webpack-plugin')
let CopyWebpackPlugin = require('copy-webpack-plugin')
let MinCssExtractPlugin = require('mini-css-extract-plugin')
let WebpackBar = require('webpackbar')

// 这句代码在文件里面执行，./表示config文件夹
let entry = require('./entry')
let html = require('./html')

module.exports = {
    // 配置入口
    entry, 
    module: {
        rules: [
            // 每处理一个文件类型，就写一个规则，一个规则对应一个对象
            {
                // 表示编译后缀名为scss sass的文件
                test: /\.(sass|scss|css)$/,
                // loader不需要引入，安装后直接使用
                // loader执行顺序，从下到上，从右到左
                // 把scss编译为css，去识别css，再执行编译css
                // style-loader不需要了 我们要用link的方式引入css 所以替换成MinCssExtractPlugin.loader
                use: [MinCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            },
            {
                test: /\.(js|ts|jsx|tsx|mjs)$/,
                use: [{
                    loader: 'esbuild-loader',
                     options: {
                         loader: 'tsx',
                         target: 'es2015'
                     }
                }]
            },
            {
                test: /\.(webp|png|svg|gif|jpe?g)$/,
                type: 'asset',
                generator: {
                    filename: 'images/[name].[contenthash][ext]'
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 6 * 1024 //超过6kb 就使用图片资源，小于20kb就使用base64编码
                    }
                }
            }
        ]
    },
   
    plugins: [
        ...html,
        new CopyWebpackPlugin({
            patterns: [{
                 // __dirname 表示这个文件所在这个文件夹的绝对路径
                // 在 webpack.common.js 文件中使用，所以__dirname 表示config文件夹的绝对路径，我们要拿webpack2
                // 目录下的public,而不是config里面的public,同时，config文件夹里面没有public
                // process.cwd() 获取当前node流程的绝对路径
                // 这里为什么不用相对路径，是因为只能用绝对路径
                from: path.join(process.cwd(), './public'),
                to: path.join(process.cwd(), './dist'),
                globOptions: {
                    ignore: ['**/*.html']
                }
            }]
        }),
        new MinCssExtractPlugin({
            filename: 'css/[name].css', 
        }),
        new WebpackBar({
            color: "#85d",
            basic: false, 
            profile: false, 
        })

    ],
    cache: {
        type: 'filesystem'
    },
     devtool: "eval-cheap-module-source-map", 
    performance: {
        maxEntrypointSize: 10000000,
        maxAssetSize: 30000000
    }
}